import { createNamespacedHelpers } from 'vuex';

let { mapState } = createNamespacedHelpers('user');


export default {
    data() {
        return { list: [] }
    },
    computed: {
        ...mapState(['userInfo'])
    },
 
    methods: {
        getMenuList(authList) {
            console.log(authList, 'authList\n')
            let menu = [];
            let map = {}//建立一个映射表
            authList.forEach(m => {
                m.children = [];
                map[m.id] = m; //映射表 如：{1:菜单,2:菜单}
                if (m.pid == -1) {
                    menu.push(m); // 如果是根 就直接push到menu中
                } else {//放在对应的根下面 有的话就放在对应的children上
                    map[m.pid] && map[m.pid].children.push(m);
                }
            });
            console.log(menu, 'menu\n')
            return menu;
        }
    },

    mounted() {//获取菜单列表
        this.list = this.getMenuList(this.userInfo.authList);
    },
    render() {
        let renderChildren = (list) => { //渲染孩子的菜单
            return list.map(child=>{
                return child.children.length ? 
                <el-submenu index={child._id}>
                <div slot="title">{child.name}</div>
                {/* 如果有孩子的话继续渲染 -- 递归 */}
                {renderChildren(child.children)}
                    </el-submenu> :
                        //自己对应当前的路径
                <el-menu-item index={child.path}>{child.name}</el-menu-item>
            })
        }

        
        return <el-menu
        background-color="#333"
        text-color="#fff"
        active-text-color="#ffd04b"
        router={true}
    >
            {renderChildren(this.list)}
        </el-menu>
    }
}